<template>
	<div v-if="show" class="preview-media" ref="preview-media" :style="{ 'z-index': zIndex }" @click="close">
		<swiper @change="currentChange" :current="current" :duration="300" class="preview-media-swiper">
			<swiper-item class="preview-media-swiper-item" v-for="(item, index) in sources" :key="index">
				<image @longpress="saveImage(item.url)" lazy-load class="pmsi-img" mode="aspectFit"
					v-if="item.type == 'image'" :src="item.url"></image>
				<!-- <view v-if="item.params" class="watermark-btn" @click.stop="changeStatus(index)">{{
					item.watermark ? '隐藏水印' : '展示水印' }}</view> -->

				<view class="pmsi-mark" v-if="item.type == 'image' || item.type == 'video'">
					<!-- ai合规情况结论 S -->
					<view @click.stop="toAppeal(infoMap[index], item)"
						:class="['ai-result', ['gre', 'org', 'red'][infoMap[index].result - 1]]"
						v-if="infoMap[index] && infoMap[index].result">
						<image class="ai-result-ico" src="@/static/images/ai.svg"></image>
						<text>
							{{ ['合规', '疑似合规', '不合规'][infoMap[index].result - 1] }}
						</text>
						<view class="appeal" v-if="infoMap[index].result == 3 && appeal">
							申诉
						</view>
					</view>
					<!-- ai合规情况结论 E -->

					<!-- ai选中问题 S -->
					<view :class="'reason-tips'" v-if="reason.businessReason">
						<text :class="['reason-tips-tag', reason.determine == 2 ? 'red' :(reason.determine == 0 ? 'gre' : 'org')]">
							{{ reason.businessReason }}
						</text>
					</view>
					<!-- ai选中问题 E -->

					<!-- 水印信息 -->
					<view class="img-msg" v-if="infoMap[index]"
						:style="{ width: infoMap[index].width + 'px', height: infoMap[index].height + 'px' }">
						<!-- ai结果框绘制 E -->
						<view class="overlay" v-if="infoMap[index].overlay"
							:style="{ width: infoMap[index].width + 'px', height: infoMap[index].height + 'px' }">
							<view v-for="(it, idx) in infoMap[index].overlay" :key="idx" class="box"
								:style="{ left: it.x + 'px', top: it.y + 'px', width: it.width + 'px', height: it.height + 'px', borderColor: ['#2FFF00', '#FF7505', '#E02020'][it.determine], opacity: highlightBox == it.key ? '1' : '0.9', borderWidth: highlightBox == it.key ? '2px' : '1px' }">
							</view>
						</view>
						<!-- ai结果框绘制 S -->
						<!-- 不合规原因 S -->
						<view class="reasons" v-if="infoMap[index].nonCompliant && infoMap[index].nonCompliant.length">
							<view class="reasons-tab" @click.stop="changeShowNonList(infoMap[index])">
								<image
									:style="{ transform: infoMap[index].showNonList ? 'rotate(0deg)' : 'rotate(180deg)' }"
									class="ico" src="@/static/images/down_white.png"></image>
								不合规项({{ infoMap[index].nonCompliant.length }})
							</view>
							<view class="reasons-list" v-if="infoMap[index].showNonList">
								<view :class="['reasons-item', highlightBox == it.key ? 'notpas-act' : '']"
									v-for="(it, idx) in infoMap[index].nonCompliant" :key="idx"
									@click.stop="chooseErrorBox(it)">
									<text class="reasons-item-tag">
										不合规
									</text>
									{{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
									}}
								</view>
							</view>

						</view>
						<!-- 不合规原因 E -->
						<!-- 疑似合规原因 S -->
						<view class="reasons" v-if="infoMap[index].posCompliant && infoMap[index].posCompliant.length">
							<view class="reasons-tab pos-tab" @click.stop="changeShowPosList(infoMap[index])">
								<image
									:style="{ transform: infoMap[index].showPosList ? 'rotate(0deg)' : 'rotate(180deg)' }"
									class="ico" src="@/static/images/down_white.png"></image>
								疑似合规项({{ infoMap[index].posCompliant.length }})
							</view>
							<view class="reasons-list" v-if="infoMap[index].showPosList">
								<view :class="['reasons-item', highlightBox == it.key ? 'pos-act' : '']"
									v-for="(it, idx) in infoMap[index].posCompliant" :key="idx"
									@click.stop="chooseErrorBox(it)">
									<text class="reasons-item-tag pos-tag">
										疑似合规
									</text>
									{{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
									}}
								</view>
							</view>

						</view>
						<!-- 疑似合规原因 E -->

						<!-- 合规项 S -->
						<view class="reasons" v-if="infoMap[index].passList && infoMap[index].passList.length">
							<view class="reasons-tab pas-tab" @click.stop="changeShowPassList(infoMap[index])">
								<image
									:style="{ transform: infoMap[index].showPassList ? 'rotate(0deg)' : 'rotate(180deg)' }"
									class="ico" src="@/static/images/down_white.png"></image>
								合规项({{ infoMap[index].passList.length }})
							</view>
							<view class="reasons-list" v-if="infoMap[index].showPassList">
								<view :class="['reasons-item', highlightBox == it.key ? 'pas-act' : '']"
									v-for="(it, idx) in infoMap[index].passList" :key="idx"
									@click.stop="chooseErrorBox(it)">
									<text class="reasons-item-tag pas-tag">
										合规
									</text>
									{{ Array.isArray(it.reason) ? it.reason[0].businessReason : it.reason.businessReason
									}}
								</view>
							</view>

						</view>
						<!-- 合规项 E -->

						<!-- 图片水印 -->
						<view class="bottom-block" v-if="!watermarkInfo[index]">

						</view>
						<view v-if="watermarkInfo[index]" class="watermark">
							<view class="img-msg-item aligncenter">
								<view class="times">
									{{ watermarkInfo[index].time || '' }}
								</view>
								<view>
									<view class="dates">
										{{ watermarkInfo[index].week || '' }}
									</view>
									<view class="dates">
										{{ watermarkInfo[index].day || '' }}
									</view>

								</view>

							</view>

							<view class="img-msg-line">
							</view>
							<view class="img-msg-item" v-if="watermarkInfo[index].buildingName">
								<view class="imi-label">项目：</view>
								<view class="imi-content"> {{ watermarkInfo[index].buildingName || '' }}</view>
							</view>
							<view class="img-msg-item" v-if="watermarkInfo[index].elevatorName">
								<view class="imi-label">梯号：</view>
								<view class="imi-content">{{ watermarkInfo[index].elevatorName || '' }}</view>
							</view>
							<view class="img-msg-item" v-if="watermarkInfo[index].address">
								<view class="imi-label">定位：</view>
								<view class="imi-content">{{ watermarkInfo[index].address || '' }}</view>
							</view>
							<image class="watermark-logo" mode="widthFix"
								src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/e8RBYQDDWsmWd150ea3f6a6d1e0291738b8a1bdf4557.png">
							</image>
							<view class="watermark-id">
								照片ID:{{ watermarkInfo[index].imgId }}
							</view>
						</view>
					</view>
					<!-- 水印信息end -->
				</view>

				<video class="pmsi-video" :id="'video' + index" @click.stop="" v-if="item.type == 'video'"
					:autoplay="false" :always-embed="true" :src="item.url" :show-background-playback-button="false"
					ref="videoElement"></video>

			</swiper-item>
		</swiper>
		<div class="preview-media-current">{{ current + 1 }} / {{ sources.length }}</div>

		<appealModel ref="appealModel" @closed="close"></appealModel>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { getPathInfo } from '@/utils/watermarkTool.js';
import { getImageInfo } from '@/apis/system';
import appealModel from './appeal-model.vue';
import md5 from 'js-md5'; 

export default {
	name: 'preview-media',
	components: {
		appealModel
	},
	props: {
		appendToBody: {
			type: Boolean,
			default: true
		},
		zIndex: {
			type: [Number, String],
			default: 333
		},
	},
	data() {
		return {
			dayMap: [
				'星期日',
				'星期一',
				'星期二',
				'星期三',
				'星期四',
				'星期五',
				'星期六',
			],
			show: false,
			sources: [],
			current: 0,
			// 图片信息集合
			infoMap: {},
			textList: [],
			watermarkInfo: {

			},
			// 选中的框
			highlightBox: '',
			reason: {
				businessReason: '',
				detailedReason: ''
			},
			appeal: false
		};
	},
	computed: {
		// 离线状态 ture 在线
		...mapState('system', ['onlineStatus'])
	},

	methods: {
		// 点击异常项(高亮)
		chooseErrorBox(item) { 
			this.highlightBox = item.key;
			if (item.reason) {
				if (Array.isArray(item.reason)) {
					this.reason = { ...item.reason[0], determine: item.determine };
				} else {
					this.reason = {
						determine: item.determine,
						businessReason:item.reason.businessReason,
						detailedReason: item.reason.detailedReason
					};
				} 
			} else {
				this.reason = {
					businessReason: '',
					detailedReason: ''
				};
			}
		},
		// 长按保存
		saveImage(url) {
			if (!url) {
				return;
			}
			if (url.indexOf('aliyuncs.com') != -1) {
				// 网络图片 下载后保存
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				uni.downloadFile({
					url: url,
					success: (res) => {
						let path = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: () => {
								uni.showToast({
									title: '照片已保存到相册',
									icon: 'none'
								});
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							},
						});
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					},
				});
			} else {
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.showToast({
							title: '照片已保存到相册',
							icon: 'none'
						});
					},
				});
			}
		},
		// 申诉
		toAppeal(info, item) {
			if (info.result != 3 || !this.appeal) {
				// 非不合规不用申诉
				return;
			}
			uni.showToast({
				title: '申诉'
			});
			this.$refs.appealModel.init(item, info.nonCompliant);
		},
		//
		changeStatus(index) {
			let item = this.sources[index];
			if (item.watermark) {
				item.url = item.url.split('?')[0];
				item.watermark = false;
			} else {
				item.url = item.url + '?' + item.params;
				item.watermark = true;
			}
		},
		async init({ sources, current, appeal = false }) {
			// sources = ['https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/59280017307157985.jpeg'];
			uni.showLoading({
				title: '加载中'
			});
			this.highlightBox = '';
			this.reason = {
				businessReason: '',
				detailedReason: ''
			};

			// appeal 是否显示申诉按钮
			this.appeal = appeal;
			try {
				let pages = getCurrentPages();
				let pag = pages[pages.length - 1];
				// 当前在保养页面且任务状态已完成以上
				if (pag.route && pag.route.indexOf('workOrders/detail') != -1) {
					if (this.$root.status >= 3) {
						this.appeal = true;
					}
				}
			} catch (error) {
				console.log('error', error);
			}
			console.log('sources', sources);
			this.watermarkInfo = {};
			let arr = [];
			this.infoMap = {};
			for (let i = 0; i < sources.length; i++) {
				let item = sources[i];

				console.log('[preview-media]item', JSON.stringify(item));

				let type = typeof item == 'string' ? 'image' : (item.type || 'image');
				let url = (typeof item == 'string' ? item : item.url || '').split('?')[0];
				let id = i;
				if (type == 'image' || type == 'video') {
					// 网络图片
					let filename = url.split('/').pop().split('.').shift();

					// 判断URl是否为base64
					let info;
					if (url.indexOf('mrm_tmp') !== -1) {
						// base64
						const md5Path = md5(url);
						try {
							info = await this.getHeadInfo(md5Path);
						} catch (error) {
							console.log(`[init] error:${error}`);
						}
					} else {
						info = await this.getHeadInfo(url);
					}

					let wh = await this.getImginfo(url);
					let msi = uni.upx2px(750) / wh.width;
					info.width = wh.width * msi;
					info.height = wh.height * msi;
					let options = [];
					let watermark = {};
					try {
						watermark = JSON.parse(decodeURIComponent(info['x-oss-meta-watermark'] || info['watermark'] || '{}'));
					} catch (e) {
						console.warn('水印信息解析失败:', e);
					}
					// 保存水印信息

					if (watermark['createTime']) {
						let date = new Date(watermark['createTime'].replace(/-/g, '/'));
						const year = date.getFullYear();
						const month = date.getMonth() + 1;
						const day = date.getDate();
						const hour = date.getHours();
						const minute = date.getMinutes();
						const week = this.dayMap[date.getDay()];
						watermark.imgId = info.imgId || filename;
						watermark.time = `${hour > 9 ? hour : '0' + hour}:${minute > 9 ? minute : '0' + minute}`;
						watermark.day = `${year}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day}`;
						watermark.week = week;
						options.push({
							content: watermark['createTime'],
							fontSize: 12
						});
						this.watermarkInfo[id] = watermark;
					}
					if (watermark['buildingName']) {
						options.push({
							content: watermark['buildingName'],
							fontSize: 12
						});
					}
					if (watermark['elevatorName']) {
						options.push({
							content: watermark['elevatorName'],
							fontSize: 12
						});
					}
					if (watermark['address']) {
						options.push({
							content: watermark['address'],
							fontSize: 12
						});
					}

					if (info['x-oss-meta-result'] || info['result']) {
						// 有ai识别结果

						let result = info['x-oss-meta-result'] || info['result'];
						if (info.business_result !== undefined && info.business_result !== '') {
							// 有维修结果优先显示

							result = info.business_result;
						}
						if (info['x-oss-meta-business-result'] !== undefined && info['x-oss-meta-business-result'] !== '') {
							// 有维修结果优先显示
							result = info['x-oss-meta-business-result'];
						}
						// console.log('result1111',result,info['x-oss-meta-result']);
						info.result = Number(result) + 1;
						console.log('有ai识别结果', info);
					}

					if (info['x-oss-meta-model-result'] || info['model_result']) {
						// 有ai识别结果
						let resultInfo = {};

						try {
							if (info['model_result']) {
								resultInfo = JSON.parse(info['model_result']);
							} else {
								resultInfo = JSON.parse(decodeURIComponent(info['x-oss-meta-model-result']));
							}
						} catch (e) {
							console.warn('模型识别结果解析失败:', e);
						}
						console.log('resultInfo', resultInfo);
						// 不合规
						let nonCompliant = [];
						// 疑似合规
						let posCompliant = [];
						let passList = [];
						if (resultInfo instanceof Array) {
							// 数组 旧数据
							for (let i = 0; i < resultInfo.length; i++) {
								if (resultInfo[i].determine == 2) {
									nonCompliant.push(resultInfo[i]);
								}

								if (resultInfo[i].determine == 1) {
									posCompliant.push(resultInfo[i]);
								}
								if (resultInfo[i].determine != undefined && resultInfo[i].determine == 0) {
									passList.push(resultInfo[i]);
								}
							}
							// info.overlay = resultInfo;
						}  

						if (typeof resultInfo == 'object') {
							let overlay = [];
							let ai_business_config = info['ai_business_config'] ? JSON.parse(info['ai_business_config']) : (info['x-oss-meta-ai-business-config'] ? JSON.parse(decodeURIComponent(info['x-oss-meta-ai-business-config'] || '')) : '');
							// 对象（原始数据）
							let resultObj = this.getResultObj({ width: wh.width, modelId: info['x-oss-meta-model-id'] || info['model_id'], result: resultInfo });

							console.log('resultObj', resultObj);

							for (let i = 0; i < resultObj.length; i++) {
								let key = resultObj[i].key;

								console.log('key', key);

								let itemDetermine = resultObj[i].determine;
								if (itemDetermine == 2) {
									if (!ai_business_config || resultInfo.threeOnOneDeter || resultInfo.emergencyLight || (ai_business_config && ai_business_config[key])) {
										nonCompliant.push(resultObj[i]);
									}
								}

								if (itemDetermine == 1) {
									if (!ai_business_config || resultInfo.threeOnOneDeter || resultInfo.emergencyLight || (ai_business_config && ai_business_config[key])) {
										posCompliant.push(resultObj[i]);
									}
								}

								if (itemDetermine !== undefined && itemDetermine == 0) {
									passList.push(resultObj[i]);
								}
								// if (itemDetermine > 0) {
								// 	// 非合规项目展示框
								// 	let overlaychilds = resultObj[i].bboxInfo.map((item) => {
								// 		return { ...item, key: resultObj[i].key };
								// 	});
								// 	overlay.push(...overlaychilds);
								// }

								let overlaychilds = resultObj[i].bboxInfo.map((item) => {
									return { ...item, key: resultObj[i].key };
								});
								overlay.push(...overlaychilds);
							}
							info.overlay = overlay;
							console.log('resultObj', resultObj, resultInfo);
						}
						info.nonCompliant = nonCompliant;
						info.posCompliant = posCompliant;
						info.passList = passList;
						info.showNonList = true;
						info.showPosList = true;
						info.showPassList = true; 
					}

					this.infoMap[id] = info; 
					console.log('this.infoMap[id]',info); 
				}
				let it = { id, type, url, watermark: url.indexOf('?') != -1 };
				if (it.url.indexOf('?') != -1) {
					it.params = it.url.split('?')[1];
				}

				arr.push(it);
			}
			this.sources = arr;
			this.current = current;

			this.show = true;
			uni.hideLoading();

			// 显示组件后播放当前视频
			this.$nextTick(() => {
				this.playCurrentVideo();
			});
		},
		getBoxs(org, width, determine) {
			if (!org || org.length == 0) {
				return [];
			}
			let arr = [];
			const msi = (uni.upx2px(750) / width);
			if (Array.isArray(org[0])) {
				// 二维数组
				org.forEach(box => {
					const [x1, y1, x2, y2] = box;
					arr.push({
						x: (x1 * msi).toFixed(2),
						y: (y1 * msi).toFixed(2),
						width: ((x2 - x1) * msi).toFixed(0),
						height: ((y2 - y1) * msi).toFixed(0),
						determine
					});
				});
			} else {
				// 一维数组  
				const [x1, y1, x2, y2] = org;
				arr.push({
					x: (x1 * msi).toFixed(2),
					y: (y1 * msi).toFixed(2),
					width: ((x2 - x1) * msi).toFixed(0),
					height: ((y2 - y1) * msi).toFixed(0),
					determine
				});
			}
			return arr;
		},

		// 处理模型输出结果
		getResultObj({ width, modelId, result }) {
			if (!result) {
				return [];
			}
			// 识别结果数组
			let arr = [];
			// 保养签到模型
			if (result.towardDetermine) {
				// 人体朝向
				arr.push({
					bboxInfo: [],
					determine: result.towardDetermine.determine,
					key: 'towardDetermine',
					reason: result.towardDetermine.reason
				});
			}
			if (result.headDetermine) {
				// 头部分析(判断是否佩戴安全帽
				arr.push({
					bboxInfo: this.getBoxs(result.headDetermine.bboxInfo, width, result.headDetermine.determine),
					determine: result.headDetermine.determine,
					key: 'headDetermine',
					reason: result.headDetermine.reason
				});
			}

			if (result.fenceDetermine) {
				// 围栏摆放合规分析
				// 门框
				let bboxInfoDoor = this.getBoxs(result.fenceDetermine.bboxInfoDoor, width, result.fenceDetermine.determine);
				// 围栏
				let bboxInfoFence = this.getBoxs(result.fenceDetermine.bboxInfoFence, width, result.fenceDetermine.determine);
				// 告示牌
				let bboxInfoNoticeboard = this.getBoxs(result.fenceDetermine.bboxInfoNoticeboard, width, result.fenceDetermine.determine);
				arr.push({
					bboxInfo: bboxInfoDoor.concat(bboxInfoFence, bboxInfoNoticeboard),
					determine: result.fenceDetermine.determine,
					key: 'fenceDetermine',
					reason: result.fenceDetermine.reason
				});
			}

			if (result.footDetermine) {
				// 脚部(判断是否穿安全鞋
				arr.push({
					bboxInfo: this.getBoxs(result.footDetermine.bboxInfo, width, result.footDetermine.determine),
					determine: result.footDetermine.determine,
					key: 'footDetermine',
					reason: result.footDetermine.reason
				});
			}
			// 保养签退
			if (result.threeOnOneDeter) {
				// 三合一
				if (result.threeOnOneDeter.EUS) {
					arr.push({
						bboxInfo: this.getBoxs(result.threeOnOneDeter.EUS.bboxInfo, width, result.threeOnOneDeter.EUS.determine),
						determine: result.threeOnOneDeter.EUS.determine,
						key: 'EUS',
						reason: result.threeOnOneDeter.EUS.reason
					});
				}

				if (result.threeOnOneDeter.EMS) {
					arr.push({
						bboxInfo: this.getBoxs(result.threeOnOneDeter.EMS.bboxInfo, width, result.threeOnOneDeter.EMS.determine),
						determine: result.threeOnOneDeter.EMS.determine,
						key: 'EMS',
						reason: result.threeOnOneDeter.EMS.reason
					});
				}
				if (result.threeOnOneDeter.EIS) {
					arr.push({
						bboxInfo: this.getBoxs(result.threeOnOneDeter.EIS.bboxInfo, width, result.threeOnOneDeter.EIS.determine),
						determine: result.threeOnOneDeter.EIS.determine,
						key: 'EIS',
						reason: result.threeOnOneDeter.EIS.reason
					});
				}
			}

			// 底坑清洁模型
			if (result.pitAreaCleaning) {
				// 暂不作处理 
				arr.push({
					bboxInfo: [],
					determine: result.pitAreaCleaning.determine,
					key: 'pitAreaCleaning',
					reason: result.pitAreaCleaning.reason
				});
			}

			if (result.liftRoofAreaCleaning) {
				// 电梯顶棚清洁模型
				console.log('getResultObj :电梯顶棚清洁模型:', result);
				console.log('getResultObj :电梯顶棚清洁模型Reason :', result.liftRoofAreaCleaning.reason);
				arr.push({
					bboxInfo: [],
					determine: result.liftRoofAreaCleaning.determine,
					key: 'liftRoofAreaCleaning',
					reason: result.liftRoofAreaCleaning.reason
				});
			}

			if (result.layerSillAreaCleaning) {
				// 地坎清洁模型
				console.log('getResultObj :地坎清洁模型:', result, result.layerSillAreaCleaning);
				const layerSillAreaCleaning = result.layerSillAreaCleaning || result.LayerSillAreaCleaning;
				arr.push({
					bboxInfo: [],
					determine: layerSillAreaCleaning.determine,
					key: 'layerSillAreaCleaning',
					reason: layerSillAreaCleaning.reason
				});
			}

			if (result.emergencyLight) {
				// 应急灯检测模型
				console.log('getResultObj :应急灯检测模型:', result);
				console.log('getResultObj :应急灯检测模型Reason :', result.emergencyLight.reason);
				arr.push({
					bboxInfo: [],
					determine: result.emergencyLight.determine,
					key: 'emergencyLight',
					reason: result.emergencyLight.reason,
				});
			}

			// 清晰度模型
			if (result.clarity) {
				arr.push({
					bboxInfo: [],
					determine: result.clarity.determine,
					key: 'clarity',
					reason: result.clarity.reason
				});
			}

			// 翻拍模型
			if (result.MoorePattern) {
				arr.push({
					bboxInfo: [],
					determine: result.MoorePattern.determine,
					key: 'MoorePattern',
					reason: result.MoorePattern.reason
				});
			}

			// 限速器张紧轮装置检查
			if (result.tens) {
				arr.push({
					bboxInfo: [],
					determine: result.tens.determine,
					key: 'tens',
					reason: result.tens.reason
				});
			}

			return arr;
		},

		changeShowPosList(info) {
			info.showPosList = info.showPosList ? false : true;
			this.$forceUpdate();
		},
		changeShowNonList(info) {
			info.showNonList = info.showNonList ? false : true;
			this.$forceUpdate();
		},

		changeShowPassList(info) {
			info.showPassList = info.showPassList ? false : true;
			this.$forceUpdate();
		},
		// 获取图片基本信息
		async getImageInfo(url) {
			return getImageInfo({ url });
		},

		// 获取图片原始尺寸
		getImginfo(data) {
			return new Promise((resolve) => {
				uni.getImageInfo({
					// 可以是本地路径或网络图片地址
					src: data,
					success: function (res) {
						const width = res.width;
						const height = res.height;
						if (res.orientation == 'right' || res.orientation == 'left') {
							resolve({
								height: width,
								width: height
							});
						} else {
							resolve({
								width, height
							});
						}
					},
					fail: function (err) {
						console.log('获取图片信息失败', err);
						resolve({});
					}
				});
			});
		},
		getHeadInfo(url) {
			if (url.indexOf('aliyuncs.com') == -1) {
				return getPathInfo(url);
			}
			return new Promise((resolve) => {
				// #ifdef H5
				this.http.head(url).then(header => {
					const newHeader = {};
					Object.keys(header).forEach(key => {
						// 转码，兼容中文字符 
						newHeader[key] = decodeURIComponent(header[key]);
					});
					resolve(newHeader);
				});
				// #endif

				// #ifndef H5
				uni.request({
					method: 'HEAD',
					url,
					success(res) {
						let header = res.header || {};
						Object.keys(header).forEach(key => {
							// 转码，兼容中文字符
							header[key] = decodeURIComponent(header[key]);
						});
						resolve(header);
					}, fail() {
						resolve({});
					}
				});
				// #endif
			});
		},
		currentChange(res) {
			// 暂停所有视频
			this.pauseAllVideos();

			this.current = res.detail.current;
			this.highlightBox = '';
			this.reason = {
				businessReason: '',
				detailedReason: ''
			};

			// 延迟一下确保DOM更新完成后再播放当前视频
			this.$nextTick(() => {
				this.playCurrentVideo();
			});
		},
		// 暂停所有视频
		pauseAllVideos() {
			this.sources.forEach((item, index) => {
				if (item.type === 'video') {
					const videoContext = uni.createVideoContext(`video${index}`, this);
					videoContext.pause();
				}
			});
		},
		// 播放当前视频
		playCurrentVideo() {
			const currentItem = this.sources[this.current];
			if (currentItem && currentItem.type === 'video') {
				const videoContext = uni.createVideoContext(`video${this.current}`, this);
				videoContext.play();
			}
		},
		close() {
			// 关闭时暂停所有视频
			this.pauseAllVideos();
			this.show = false;
			this.$emit('closed');
		}

	},
	mounted() {

	},
	destroyed() {
		this.close();
	}
};
</script>
<style lang="scss" scoped>
.preview-media {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: #000;

	&-swiper {
		width: 100%;
		height: 100%;

		&-item {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: scroll;
			overflow-y: overlay;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.pmsi-img {
				width: 100%;
				height: 100%;
			}

			.pmsi-video {
				width: 100%;

				/* #ifndef H5 */
				height: 500rpx;
				/* #endif */

				/* #ifdef H5 */
				height: 70vh;
				/* #endif */
			}

			.watermark-btn {
				position: absolute;
				bottom: 80rpx;
				right: 30rpx;
				background-color: #fff;
				color: #333;
				font-size: 24rpx;
				padding: 6rpx 14rpx;
				border-radius: .3rem;
			}

		}
	}

	.pmsi-mark {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		pointer-events: none;
	}

	.img-msg {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		pointer-events: auto;
		position: absolute;
		// bottom: 0px;
		// left: 0px;

		.overlay {
			width: 750rpx;
			height: 960rpx;
			position: absolute;
			pointer-events: none;
			left: 0;
			top: 0;
			z-index: 99;

			.box {
				border: 1px solid red;
				position: absolute;
			}
		}

		.reasons {
			width: 94%;
			padding-left: 20rpx;

			&-tab {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				width: fit-content;
				padding: 4px;
				border-radius: 4px;
				color: #fff;
				background: rgba(224, 32, 32, 0.7);
				margin-bottom: 8rpx;

				.ico {
					width: 26rpx;
					height: 26rpx;
					margin-right: 4rpx;
					transition: .3s all;
				}
			}

			&-list {
				width: 100%;
				display: flex;
				flex-direction: column;

				.reasons-item {
					display: block;
					padding: 4px;
					font-size: 24rpx;
					border-radius: 4px;
					width: fit-content;
					color: #fff;
					margin-bottom: 8rpx;
					background: rgba(0, 0, 0, 0.4);

					&-tag {
						background: rgba(224, 32, 32, 1);
						margin-right: 4rpx;
						padding: 0 4rpx;
						border-radius: 3px;
					}

				}
			}

			.pos-tab {
				background: rgba(255, 117, 5, 0.7);
			}

			.pos-tag {
				background: rgba(255, 117, 5, 1);
			}

			.pas-tab {
				background: rgba(104, 202, 0, 0.7);
			}

			.pas-tag {
				background: #68CA00;
			}

		}

		.pas-act {
			background: #fff !important;
			color: #68CA00 !important;

			.reasons-item-tag {
				color: #fff !important;
			}
		}

		.pos-act {
			background: #fff !important;
			color: rgba(255, 117, 5, 1) !important;

			.reasons-item-tag {
				color: #fff !important;

			}
		}

		.notpas-act {
			background: #fff !important;
			color: rgba(224, 32, 32, 1) !important;

			.reasons-item-tag {
				color: #fff !important;
			}
		}

		.watermark {
			padding-bottom: 10rpx;
		}

		.bottom-block {
			width: 100%;
			height: 240rpx;
			pointer-events: none;
		}

		&-item {
			color: #fff;
			font-size: 24rpx;
			width: 55%;
			padding-left: 20rpx;
			display: flex;
			align-items: baseline;
			text-shadow: 0.1em 0.1em 0.2em black;
			pointer-events: none;

			.imi-label {
				margin-right: 10rpx;
			}

			.imi-content {
				flex: 1;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
			}
		}

		.aligncenter {
			align-items: center !important;
		}

		.times {
			font-weight: bold;
			font-size: 60rpx;
			margin-right: 10rpx
		}

		.dates {
			font-size: 22rpx;
		}

		&-line {
			background-color: #fff;
			width: 53%;
			height: 2rpx;
			margin-bottom: 10rpx;
			margin-left: 20rpx;
			box-shadow: 0.1em 0.1em 0.2em black;
		}

		.watermark-logo {
			width: 160rpx;
			height: auto;
			position: absolute;
			bottom: 51rpx;
			right: 10rpx;
		}

		.watermark-id {
			height: auto;
			position: absolute;
			text-align: right;
			font-size: 20rpx;
			bottom: 21rpx;
			right: 10rpx;
			color: #fff;
			text-shadow: 0.1em 0.1em 0.2em black;
		}

	}

	.reason-tips {
		width: 750rpx;
		position: absolute;
		left: 0;
		bottom: 90vh;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;
		pointer-events: auto;

		&-tag {
			font-size: 24rpx;
			color: #fff;
			padding: 2rpx 10rpx;
		}
	}

	.ai-result {
		position: absolute;
		bottom: 90vh;
		left: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 2rpx 12rpx 6rpx 12rpx;
		vertical-align: unset;
		font-weight: normal;
		z-index: 11;
		pointer-events: auto;

		&-ico {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		.appeal {
			background-color: #fff;
			border-radius: 2rem;
			padding: 0 10rpx;
			margin-left: 4rpx;
			color: #E02020;
			margin-top: 4rpx;
			font-size: 24rpx;
			padding-bottom: 2rpx;
		}
	}

	.gre {
		background-color: #68CA00;
	}

	.org {
		background-color: #FF7505;
	}

	.red {
		background-color: #E02020;
	}

	&-current {
		position: absolute;
		top: 30rpx;
		width: 100%;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

}
</style>